<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>

		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/reset.css" />

		<style>
			.mui-content {
				background: #ffffff;
			}
			
			.list-container {
				width: 100%;
				margin: 0 auto;
			}
			
			.img-wrap {
				width: 100%;
			}
			
			.img-wrap img {
				width: 100%;
			}
			
			.list-box {
				width: 100%;
				background: #ffffff;
				height: 22rem;
				overflow-y: scroll;
				-webkit-overflow-scrolling: touch;
			}
			
			.list-box li {
				overflow: hidden;
				padding: 10px 10px 0px 20px;
				box-sizing: border-box;
				position: relative;
			}
			
			.list-box li img {
				width: 60px;
				height: 60px;
				float: right;
			}
			
			.list-box li span {
				width: 72%;
				float: left;
				font-size: 16px;
				color: #282828;
				overflow: hidden;
				height: 60px;
				line-height: 56px;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.list-box li a {
				display: block;
				color: #282828;
				width: 100%;
				height: 61px;
			}
			
			.list-box li .line {
				border-bottom: solid 1px #e5e5e5;
				height: 1px;
				padding: 0;
				margin: 0;
				width: 72%;
			}
			
			.word-wrpa {
				overflow: hidden;
			}
		</style>
	</head>
	</head>

	<body>

		<div class="mui-content list-container" id="news">
			<div style="position: relative" class="img-wrap " v-for="(item,index) in news" v-if="index==0" @click="openNews(item);">
				<img :src="imgsrc+item.des" />
				<h4 style="width:100%;position: absolute;bottom: 0px;color: white;z-index: 99999;font-weight: bold;padding: 20px 5px;background: rgba(0, 0, 0, 0.5)">{{item.title}}</h4>
			</div>

			<ul class="list-box">
				<li v-for="(item,index) in news" v-if="index>0">
					<a href="javascript:void(0);" @click="openNews(item);">
						<div class="word-wrpa">
							<span>{{item.title}}</span>
							<img :src="imgsrc+item.des" />
						</div>
						<div class="line"></div>
					</a>
				</li>

			</ul>
		</div>
		<script src="../js/resource/mui.min.js"></script>
		<script src="../js/resource/vue.js"></script>
		<script src="../js/resource/axios.js"></script>
		<script src="../js/resource/config.js"></script>
		<script src="../js/news.js"></script>
		<script type="text/javascript" charset="utf-8">
			(function($) {
				$('#news').scroll({
					indicators: true //是否显示滚动条
				});

			})(mui);
	
		</script>

	</body>

</html>